<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
    <style type="text/css">
        #app{
            background-image: linear-gradient(to bottom right,blue,skyblue,red);
            margin:0 auto;
            width:300px;
            height:600px;
            border:1px solid black;
            color:white;
        }
        #app h3{
            text-align: center;
        }
        /*#app p a{*/
        /*    text-decoration: none;*/
        /*}*/
    </style>
</head>
<body>
<!--创建模板容器-->
<div id="app">
    <h3>注册信息</h3>
    <form action="#" @submit="getInfo">
        <p><label for="account">&emsp;账号：</label><input id="account" type="text" v-model.trim="userInfo.account"></p>
        <p><label for="password">&emsp;密码：</label><input id="password" type="password" v-model="userInfo.password"></p>
        <p><label for="age">&emsp;年龄：</label><input id="age" type="number" v-model.number="userInfo.age"></p>
        <p><label for="address">&emsp;归属地：</label><select id="address"  v-model.number="userInfo.address">
            <option value="">请选择</option>
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
            <option value="shenzhen">深圳</option>
        </select></p>
        <p><label for="sex">&emsp;性别：</label>
            <input id="sex" type="radio" value="male" name="sex" v-model="userInfo.sex">男
            <input  type="radio" value="female" name="sex" v-model="userInfo.sex">女
        </p>
        <p><label for="hobby">&emsp;爱好：</label>
            <input id="hobby" type="checkbox" value="game" v-model="userInfo.hobby">游戏
            <input  type="checkbox" value="sport" v-model="userInfo.hobby">运动
            <input  type="checkbox" value="sing" v-model="userInfo.hobby">唱歌
        </p>
        <p><label for="other">&emsp;其他：</label>
            <textarea id="other" v-model.s.lazy="userInfo.other"></textarea>
        </p>
        <p>&emsp;&emsp;<input id="agreement" v-model="userInfo.agree" type="checkbox"><label for="agreement">我已阅读：<a href="http://atguigu.com">《用户协议》</a></label></p>

        <button>提交</button>
    </form>
</div>s

<script src="../js/vue.js"></script>
<script type="text/javascript">
    //创建vue实例
    const vm=new Vue({
        el:"#app",
        data(){
            return{
                //创建一个对象接收用户输入的数据
                userInfo:{
                    account:"",
                    password:"",
                    age:"",
                    address:"",
                    sex:"male",
                    //在checkbox中，接收变量的类型也会对接收数据产生影响，默认采集的是checkbox中checked属性的值：true/false
                    hobby:[],
                    other:"",
                    agree:""
                }
            }
        },
        methods:{
            //获取用户输入的信息并将其转换成json格式
            getInfo() {
                //判断用户已选中我同意的复选框
                if (this.userInfo.agree) {

                    alert("账号注册成功")
                } else {
                    alert("请勾选并阅读《用户协议》")
                }
            }
        }
    })
</script>
</body>
</html>
